<template>
  <div class="accounter-content">
    <div class="account-info">
      <div class="info-top">
        <div class="info-ava">
          <van-image
            round
            width="54px"
            height="54px"
            fit="cover"
            :src="userInfo.logo ? userInfo.logo : defaultIcon"
          ></van-image>
        </div>
        <div class="info-name">
          <span class="name">{{userInfo.name}}</span>
          <span class="tel">{{userInfo.phone}}</span>
        </div>
      </div>
      <div class="info-trans">
        <div class="transing">
          <p class="trans-title title-transing">转让中数量</p>
          <p class="number-transing">
            <i>
              <img src="../../../assets/images/lock.png" />
            </i>
            {{userInfo.dou_num_lock}}
          </p>
        </div>
        <div class="trans-other">
          <div class="trnas-other-item">
            <p>{{userInfo.dou_num_usable}}</p>
            <span>可转让数量</span>
            <div class="pos-bor"></div>
          </div>
          <div class="trnas-other-item">
            <p>{{userInfo.dou_num_total}}</p>
            <span>轶善豆总数</span>
          </div>
        </div>
      </div>
    </div>
    <div class="trans-btn">
      <van-button type="custom-primary" size="large" block @click="toTrans">转让</van-button>
    </div>
  </div>
</template>

<script>
import { getMyAccount, checkCanTrans } from "@/api/api";
import { Image as VanImage, Button, Tost, Toast } from "vant";
import { getMessageBox } from "@/assets/js/utils";
export default {
  name: "myAccount",
  components: {
    VanImage,
    vanButton: Button,
  },
  data() {
    return {
      defaultIcon: require("../../../assets/images/default_user.png"),
      userInfo: {
        dou_num_lock: "",
        dou_num_total: "",
        dou_num_usable: "",
        logo: "",
        name: "",
        phone: "",
      },
    };
  },
  created() {
    this.getAccountInfo();
  },
  methods: {
    // 转让
    toTrans() {
      if (Number.parseInt(this.userInfo.dou_num_usable) < 1) {
        getMessageBox("当前可转让豆数量不足");
        return false;
      }
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      checkCanTrans()
        .then((res) => {
          Toast.clear();
          if (res.code == 200000) {
            this.$router.push({
              path: "/beanTrans",
              query: {
                dou_num_usable: this.userInfo.dou_num_usable,
              },
            });
          } else if (res.code == 320006) {
            getMessageBox(
              "未完成实名认证和绑卡，请在”轶善在线”公众号，完成实名认证和银行卡绑定后，再进行转让操作。"
            );
          } else if (res.code == 310018) {
            getMessageBox(
              "未完成银行卡绑定，请在”轶善在线”公众号，完成银行卡绑定后，再进行转让操作。"
            );
          } else {
            getMessageBox(res.msg);
          }
        })
        .catch((err) => {
          Toast.clear();
        });
    },
    // 获取我的账户信息
    getAccountInfo() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      getMyAccount()
        .then((res) => {
          Toast.clear();
          if (res.code == 200000) {
            for (name in this.userInfo) {
              if (res.data[name] !== undefined) {
                this.userInfo[name] = res.data[name];
              }
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch((err) => {
          Toast.clear();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.account-info {
  width: 375px;
  height: 309px;
  background: url("../../../assets/images/accounter_bg.png") center center
    no-repeat;
  overflow: hidden;
  background-size: 100% 100%;

  .info-top {
    margin: 15px 25px;
    overflow: hidden;

    .info-ava {
      width: 54px;
      height: 54px;
      float: left;
    }
    .info-name {
      float: left;
      width: 260px;
      span {
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 54px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
      }
      span.name {
        font-size: 18px;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span.tel {
        font-size: 14px;
      }
    }
  }

  .info-trans {
    text-align: center;
    margin-top: 30px;
    overflow: hidden;
    p.trans-title {
      color: rgba(153, 153, 153, 1);
      line-height: 20px;
    }
    .transing {
      p.title-transing {
        font-size: 14px;
      }
      p.number-transing {
        font-size: 32px;
        color: rgba(51, 51, 51, 1);
        line-height: 39px;
        font-weight: bold;
        margin-top: 10px;
        font-family: DingMedium;
        i {
          img {
            width: 14px;
            height: 15px;
          }
        }
      }
    }
    .trans-other {
      margin-top: 44px;
      overflow: hidden;
      .trnas-other-item {
        width: 50%;
        float: left;
        position: relative;
        height: 50px;
        border: 1px soldi red;
        p {
          font-size: 18px;
          font-family: DingMedium;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          line-height: 22px;
          margin-bottom: 5px;
        }
        span {
          font-size: 13px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 19px;
        }

        .pos-bor {
          width: 1px;
          height: 23px;
          background: #dcdfe6;
          position: absolute;
          right: 0;
          top: 15px;
        }
      }
    }
  }
}
.trans-btn {
  margin: 30px 20px;
}
</style>
